<template>
  <div class="qualification-common-info">
    <el-form
      :inline="true"
      :model="qualification"
      label-width="110px"
      label-position="right"
      class="qualificationDataForm">
      <el-form-item label="邀请方">
        <el-input
          :disabled="showInviterCompany"
          v-model="qualification.inviterName"
          placeholder="邀请方"/>
      </el-form-item>
      <el-form-item label="邀请方负责人">
        <el-autocomplete
          :disabled="showInviterPerson"
          v-model="qualification.inviterPerson"
          :fetch-suggestions="getChangeName"
          :trigger-on-focus="false"
          placeholder="邀请方"
          value-key="userName"
          @select="selectPerson"/>
      </el-form-item>
      <el-form-item label="负责人电话">
        <el-input
          :disabled="showInviterPersonPhone"
          v-model="qualification.inviterPhone"
          placeholder="负责人电话"/>
      </el-form-item>
      <el-form-item label="受邀方">
        <el-autocomplete
          :disabled="showInvitedCompany"
          class="inline-input"
          v-model="qualification.invitedName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
          value-key="fullName"
        />
      </el-form-item>
      <el-form-item label="受邀方负责人">
        <el-autocomplete
          :disabled="showInvitedPerson"
          v-model="qualification.invitedPerson"
          :fetch-suggestions="getChangeName"
          :trigger-on-focus="false"
          value-key="userName"
          placeholder="请输入内容"
          @select="selectPerson"
        />
      </el-form-item>
      <el-form-item label="负责人电话">
        <el-input
          :disabled="showInvitedPersonPhone"
          v-model="qualification.invitedPhone"
          placeholder="负责人电话"/>
      </el-form-item>
      <el-form-item label="单据状态">
        <el-input
          disabled
          v-model="qualification.documentStatus"
          placeholder="单据状态"/>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input
          disabled
          v-model="qualification.createdAt"
          placeholder="创建时间"/>
      </el-form-item>
      <el-form-item label="单据编号">
        <el-input
          disabled
          v-model="qualification.documentCode"
          placeholder="单据编号"/>
      </el-form-item>
      <el-form-item label="邀请方产品线">
        <el-input
          :disabled="showInviterProdLine"
          v-if="showInviterProdLine"
          v-model="qualification.inviterProdLineName"
          placeholder="产品线"/>
        <div
          class="productLine"
          v-else
          @click="showTags = true">
          <el-tag
            v-for="tag in inviterLineCode"
            :key="tag"
            @close="handleClose(tag)"
            closable
            type="info">
            {{ prodLine[tag].name }}
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item label="受邀方产品线">
        <el-input
          :disabled="showInvitedProdLine"
          v-if="showInvitedProdLine"
          v-model="qualification.invitedProdLineName"
          placeholder="产品线"/>
        <div
          class="productLine"
          v-else
          @click="showTags = true">
          <el-tag
            v-for="tag in inviterLineCode"
            :key="tag"
            @close="handleClose(tag)"
            closable
            type="info">{{ prodLine[tag].name }}</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          :disabled="showDesc"
          v-model="qualification.remarks"
          placeholder="备注"/>
      </el-form-item>
    </el-form>
    <!-- 产品线弹窗 -->
    <el-dialog
      title="产品线"
      :visible.sync="showTags"
      width="540px">
      <el-transfer
        v-model="inviterLineCode"
        :data="prodLine"/>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="showTags = false">取 消</el-button>
        <el-button
          type="primary"
          @click="showTags = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { qualificationGetEmployee, qualificationGetcompany, qualificationGetProdLine } from '@const/api'
import { hasIn, cloneDeep } from 'lodash'
import { prototype } from 'stream'
export default {
  name: 'QualificationCommonInfo',
  data () {
    return {
      showTags: false,
      prodLine: [],
      inviterLineCode: [],
      // 标记是否首轮交换，0是
      isfirstExchange: '0'
    }
  },
  props: {
    qualification: {
      type: Object,
      default () {
        return {}
      }
    },
    // 0是创建，1是邀请方，2是被邀请方
    userType: {
      type: String,
      default: '0'
    },

    inviterProdLineCode: {
      type: Array,
      default () {
        return []
      }
    }
  },
  mounted () {
    this.getProdLine()
    this.inviterLineCode = this.inviterProdLineCode
  },
  watch: {
    qualification: {
      handler (nv, ov) {
        // 标记是否首轮交换，0是
        this.isfirstExchange = nv.firstExchange.toString()
      }
    },
    inviterLineCode: {
      handler (nv, ov) {
        this.$emit('sendData', nv, this.prodLine)
      }
    }
  },
  computed: {

  },
  methods: {
    handleClose (tag) {
      this.inviterLineCode.splice(this.inviterLineCode.indexOf(tag), 1)
    },
    getProdLine () {
      this.$axios.get(qualificationGetProdLine)
        .then(res => {
          let list = hasIn(res, 'data.payload') ? res.data.payload : []
          // 赋值产品线
          let prodLine = list.map((e, index) => {
            return {
              name: e.name,
              key: index,
              label: e.name,
              ...e
            }
          })
          this.prodLine = prodLine
        })
    },
    getChangeName (queryString, cb) {
      this.$axios({
        methods: 'get',
        url: qualificationGetEmployee,
        // url:'http://47.110.130.245:3000/mock/27/guoke-channel-aggregation-center/api/v1/acQualification/getEmployee',
        params: {
          keyword: queryString
        }
      }).then(res => {
        let arr = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        cb(arr.content)
      }).catch(() => {

      }).finally(() => {

      })
    },
    selectPerson (item) {
      console.log(item)
      if (this.userType) {
        console.log(1)
        this.qualification.invitedPerson = item.userName
        this.qualification.invitedPhone = item.userPhone
      } else {
        console.log(2)
        this.qualification.inviterPerson = item.userName
        this.qualification.inviterPhone = item.userPhone
      }
    },
    // 模糊搜索受邀方企业信息
    async querySearch (queryString, cb) {
      const { data } = await this.$axios.get(qualificationGetcompany, {
        params: {
          keyword: queryString
        }
      })
      cb(data.payload)
    },
    handleSelect (item) {
      this.qualification.invitedId = item.companyCode
    }
  }
}
</script>
<style lang="less">
    .qualification-common-info {
      .qualificationDataForm {
        padding: 20px;

        .el-input {
          width: 270px;
        }
      }
    }
</style>
